<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/remodal.css">
    <link rel="stylesheet" href="/static/css/remodal-default-theme.css">
    <script src="/static/jquery-3.4.1.js"></script>
    <script src="/static/js/remodal.js"></script>
</head>
<body>
<a href="#modal">第1种方式打开模态框modal1</a>
<a data-remodal-target="modal">第2种方式打开模态框modal1</a>
<!--
说明:
    1. 注意的是, 这个插件限定了max-width为700, 如果要自定义, 需要先进行覆盖.
    2. 这个模态框的好处就是动画比bootstrap的好看.
-->
<div class="remodal my-modal1" data-remodal-id="modal" style="max-width: 1000px; width: 1000px; height: 800px;">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Remodal</h1>
    <p>
        Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
    </p>
    <br>
    <div style="height: 500px;"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<br/>
<a href="#modal2">第1种方式打开模态框modal2</a>
<a data-remodal-target="modal2">第2种方式打开模态框modal2</a>
<button id="modalOpen">使用js事件打开模态框</button>
<div class="remodal my-modal2" data-remodal-id="modal2" style="max-width: 1000px; width: 1000px; height: 800px;">
    <!--
    说明:
        1. 这个叉号可以通过取消left, 使right=0来使叉号定位到右边.
    -->
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Remodal</h1>
    <p>
        Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
    </p>
    <br>
    <button id="modalClose">使用js事件关闭模态框</button>
    <div style="height: 500px;"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
</body>
<script>

    $(function () {
        modalInit();
        modal2Init();
        $('#modalOpen').click(function () {
            $('div[data-remodal-id="modal2"]').remodal().open();
        });
        $('#modalClose').click(function () {
            $('div[data-remodal-id="modal2"]').remodal().close();
        });
    });

    function modalInit() {
        // 打开中的事件监听
        $(document).on('opening', '.my-modal1', function () {
            console.log('Modal1 is opening');
        });

        // 打开后的事件监听
        $(document).on('opened', '.my-modal1', function () {
            console.log('Modal1 is opened');
        });

        // 关闭中的事件监听
        $(document).on('closing', '.my-modal1', function (e) {
            console.log('Modal1 is closing' + (e.reason ? ', reason: ' + e.reason : ''));
        });

        // 已经关闭的事件监听
        $(document).on('closed', '.my-modal1', function (e) {
            console.log('Modal1 is closed' + (e.reason ? ', reason: ' + e.reason : ''));
        });

        // 确定按钮点击后的事件
        $(document).on('confirmation', '.my-modal1', function () {
            console.log('Confirmation1 button is clicked');
        });

        // 取消按钮点击后的事件
        $(document).on('cancellation', '.my-modal1', function () {
            console.log('Cancel1 button is clicked');
        });
    }

    function modal2Init() {
        // 打开中的事件监听
        $(document).on('opening', '.my-modal2', function () {
            console.log('Modal2 is opening');
        });

        // 打开后的事件监听
        $(document).on('opened', '.my-modal2', function () {
            console.log('Modal2 is opened');
        });

        // 关闭中的事件监听
        $(document).on('closing', '.my-modal2', function (e) {
            console.log('Modal2 is closing' + (e.reason ? ', reason: ' + e.reason : ''));
        });

        // 已经关闭的事件监听
        $(document).on('closed', '.my-modal2', function (e) {
            console.log('Modal2 is closed' + (e.reason ? ', reason: ' + e.reason : ''));
        });

        // 确定按钮点击后的事件
        $(document).on('confirmation', '.my-modal2', function () {
            console.log('Confirmation button2 is clicked');
        });

        // 取消按钮点击后的事件
        $(document).on('cancellation', '.my-modal2', function () {
            console.log('Cancel button2 is clicked');
        });
    }

</script>
</html>